<template>
  <section class="f-dividend-config w-card">
    <div class="title-box">
      <span class="title-text">提现配置</span>
      <div v-if="isEdit">
        <el-button @click="cancelEdit()">取消编辑</el-button>
        <el-button type="primary" @click="submitHandle('modify')">确定重新设置</el-button>
      </div>
      <div v-else>
        <el-button type="primary" @click="isEdit = true">编辑</el-button>
      </div>
    </div>

    <section class="f-content">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
        <el-row>
          <el-col :span="5">
            <el-form-item label="单笔提现最小值:" prop="minFee">
              <el-input v-model="ruleForm.minFee" placeholder="请输入单笔提现最小值" type="number" :disabled="!isEdit">
                <template #append>
                  <div>分</div>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="5">
            <el-form-item label="单笔提现最大值:" prop="maxFee">
              <el-input v-model="ruleForm.maxFee" placeholder="请输入单笔提现最大值" type="number" :disabled="!isEdit">
                <template #append>
                  <div>分</div>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="5">
            <el-form-item label="单日提现总额度:" prop="totalFeeLimit">
              <el-input v-model="ruleForm.totalFeeLimit" placeholder="请输入单日提现总额度" type="number" :disabled="!isEdit">
                <template #append>
                  <div>分</div>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="5">
            <el-form-item label="单日提现总次数:" prop="totalCountDay">
              <el-input v-model="ruleForm.totalCountDay" placeholder="请输入单日提现总次数" type="number" :disabled="!isEdit">
                <template #append>
                  <div>次</div>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="5">
            <el-form-item label="店铺每月提现总额度:" prop="shopTotalFeeMonthLimit">
              <el-input v-model="ruleForm.shopTotalFeeMonthLimit" placeholder="请输入店铺每月提现总额度" :disabled="!isEdit">
                <template #append>
                  <div>分</div>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="1" :span="5">
            <el-form-item label="第三方银行卡扣除手续费:" prop="serviceFeeBank">
              <el-input v-model="ruleForm.serviceFeeBank" placeholder="请输入第三方银行卡扣除手续费" :disabled="!isEdit">
                <template #append>
                  <div>千分</div>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="温馨提示:" prop="remarks">
              <el-input v-model="ruleForm.remarks" placeholder="提现的温馨提示，用&分割换行" :disabled="!isEdit" :rows="3" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </section>
  </section>
</template>
    
  <script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStateStore } from '@/store'
import api from './api.js'
import { errorDeal, getStore, successDeal } from '@/utils/utils.js';

export default {
  setup(props, context) {
    const store = useStateStore()

    const router = useRouter()
    const route = useRoute();

    const ruleFormRef = ref(null)

    const state = reactive({
      isEdit: false,

      ruleForm: {},
      rules: {},
    })

    onMounted(() => {
      getWithdrawGet()
    })

    function submitHandle(type) {
      ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
          let json = JSON.parse(JSON.stringify(state.ruleForm))
          json.serviceFeeWx = 0
          json.serviceFee = 0
          api.withdrawSet(json).then(res => {
            successDeal('编辑成功！')
            getWithdrawGet()
          })
        }
      })
    }

    const cancelEdit = () => {
      state.isEdit = false
    }

    const reset = () => {
      state.ruleForm = {}
      ruleFormRef.value.resetFields()
    }

    const getWithdrawGet = () => {
      state.isEdit = false
      let json = {}
      api.withdrawGet(json).then(res => {
        if (res.data) {
          state.ruleForm = res.data
        }
      })
    }

    return {
      ...toRefs(state),
      ruleFormRef,
      submitHandle,
      cancelEdit,
      reset,
    }
  }
}
</script>
    
<style lang='scss' scoped>
.f-dividend-config {
  box-sizing: border-box;
  padding: 20px;
  height: 100%;
  > .title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    > .title-text {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .f-content {
    padding-left: 5px;
    .f-title {
      font-weight: bold;
      font-size: 15px;
      color: #000000;
      border-bottom: 1px solid #eaeaea;
      padding-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .f-tips {
        color: #f73e3e;
        font-size: 12px;
        font-weight: 500;
        margin-left: 40px;
      }
    }
    .f-tabel {
      border: 1px solid #acacac;
      width: 800px;
    }
    .f-guige-box {
      font-size: 14px;
      color: #404040;
      background: #eef2f4;
      display: flex;
      align-items: center;
      padding: 16px 10px;
      margin-top: 20px;
    }
  }

  .f-card {
    background: #f1f4f6;
    border-radius: 6px;
    padding: 20px;
    margin-top: 18px;
    .f-title {
      font-weight: 400;
      font-size: 16px;
      color: #000000;
      margin-bottom: 25px;
      display: flex;
      justify-content: space-between;
    }
    .f-ul {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px 0;
      li {
        display: flex;
        width: 50%;
        font-weight: 300;
        font-size: 14px;
        color: #000000;
        p:first-child {
          color: #424242;
          width: 100px;
          text-align: right;
        }
        .f-weight-bold {
          font-weight: bold;
        }
      }
    }
  }
}
</style>